<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">值班长日报</div>
                <div class="layui-card-body">
                    <div style="margin-bottom: 10px;">
                        <div class="layui-input-item" style="float:left;padding-right:10px;">
                            <form class="layui-form">
                                <div class="layui-inline">
                                    <input id="search-content" type="text"
                                           placeholder="请输入值班内容" class="layui-input layui-input-search">
                                </div>
                                <div class="layui-inline">
                                    <input id="search-coordination" type="text"
                                           placeholder="请输入协调事宜" class="layui-input layui-input-search">
                                </div>
                                <div class="layui-inline">
                                    <input id="search-matter" type="text"
                                           placeholder="请输入重大事项" class="layui-input layui-input-search">
                                </div>
                                <div class="layui-inline">
                                    <input id="date-range" type="text"
                                           placeholder="选择日期范围" class="layui-input layui-input-search">
                                </div>
                                <div class="layui-inline">
                                    <input id="search-shifter-name" type="text"
                                           placeholder="请输入值班人" class="layui-input layui-input-search">
                                </div>
                                <div class="layui-inline">
                                    <select id="search-state">
                                        <option value="">请选择状态</option>
                                        <option value="0">待填写</option>
                                        <option value="1">编辑中</option>
                                        <option value="2">已完成</option>
                                    </select>
                                </div>
                                <div class="layui-inline">
                                    <a id="btn-search" class="layui-btn">查找</a>
                                </div>
                            </form>
                        </div>
                        <div style="float:right;">
                            <!--<a id="btn-add" class="layui-btn">添加</a>-->
                            <a id="btn-refresh" class="layui-btn layui-btn-primary">刷新</a>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                    <table class="layui-hide" id="shifter-report-table" lay-filter="shifter-report-table"></table>
                    <script type="text/html" id="toolbar-operation">
                        <a class="layui-btn layui-btn-xs" lay-event="detail">报表详情</a>
                        {{# if(d.state==1){ }}
                        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑报表</a>
                        {{# } }}
                        {{# if(d.state==2){ }}
                        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="preview">查看报表</a>
                        {{# } }}
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="shifter-report-form">
    <div class="layui-card">
        <div class="layui-card-header">值班长日报</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="shifter-report-form">
                <input type="hidden" name="id">
                <div class="layui-form-item">
                    <label class="layui-form-label">日期</label>
                    <div class="layui-input-block">
                        <input type="text" name="reportDate" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">天气</label>
                    <div class="layui-input-block">
                        <input type="text" name="weather" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">值班内容</label>
                    <div class="layui-input-block">
                        <textarea id="content" class="layui-textarea" name="content" rows="7"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">协调事宜</label>
                    <div class="layui-input-block">
                        <textarea id="coordination" class="layui-textarea" name="coordination" rows="6"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">重大事项</label>
                    <div class="layui-input-block">
                        <textarea id="matter" class="layui-textarea" name="matter" rows="6"></textarea>
                    </div>
                </div>
                <div id="ai-layer" class="layui-form-item">
                    <button id="btn-ai" class="layui-btn layui-btn-primary layui-btn-fluid" lay-submit
                            lay-filter="form-ai">
                        <i class="layui-icon layui-icon-face-smile-b"></i>
                        <span id="span-ai">AI帮写</span>
                    </button>
                </div>
                <div id="generate-layer" class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="form-generate">保存并生成报表
                    </button>
                </div>
                <div id="submit-layer" class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="form-submit">保存并完成</button>
                </div>
            </form>
        </div>
    </div>
</script>
<script src="/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.sse.min.js"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'laydate'], function () {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var popupIndex;

        laydate.render({
            elem: '#date-range',
            range: true
        });

        table.render({
            elem: '#shifter-report-table',
            url: 'shifter-reports',
            title: '',
            skin: 'line',
            cols: [[
                {
                    title: '序号', width: 60, templet: function (d) {
                        return d.LAY_TABLE_INDEX + 1;
                    }
                },
                {field: 'reportDate', title: '日期'},
                {field: 'weather', title: '天气'},
                {field: 'content', title: '值班内容'},
                {field: 'coordination', title: '协调事宜'},
                {field: 'matter', title: '重大事项'},
                {field: 'shifterName', title: '值班人'},
                {field: 'submitTime', title: '提交时间'},
                {field: 'stateText', title: '状态'},
                {fixed: 'right', title: '操作', toolbar: '#toolbar-operation', width: 240}
            ]],
            page: true
        });

        function showShifterReportForm(data) {
            popupIndex = admin.popupRight({
                area: '560px',
                success: function () {
                    var formHtml = $('#shifter-report-form').html();
                    $('#' + this.id).html(formHtml);
                    form.render();
                    form.val('shifter-report-form', data);
                    if (data.state == 0) {
                        $('#ai-layer').show();
                        $('#generate-layer').show();
                        $('#submit-layer').hide();
                    } else if (data.state == 1) {
                        $('#ai-layer').show();
                        $('#generate-layer').hide();
                        $('#submit-layer').show();
                    } else if (data.state == 2) {
                        $('#ai-layer').hide();
                        $('#generate-layer').hide();
                        $('#submit-layer').hide();
                    }
                }
            });
            return popupIndex;
        }

        function closePopupForm() {
            if (popupIndex) {
                layer.close(popupIndex);
            }
        }

        function search() {
            table.reload('shifter-report-table', {
                where: {
                    content: $('#search-content').val(),
                    coordination: $('#search-coordination').val(),
                    matter: $('#search-matter').val(),
                    dateRange: $('#date-range').val(),
                    shifterId: $('#search-shifter-id').val(),
                    shifterName: $('#search-shifter-name').val(),
                    state: $('#search-state').val()
                },
                page: {
                    curr: 1
                }
            });
        }

        function callAi(url, elem, callback) {
            var sse = $.SSE(url, {
                onMessage: function (e) {
                    console.log('SSE message:', e);
                    var data = e.data;
                    if (data == 'END') {
                        sse.stop();
                        if (callback) {
                            callback();
                        }
                    } else {
                        var content = $(elem).val();
                        content += data;
                        $(elem).val(content);
                    }
                },
                onError: function (e) {
                    console.error('SSE connection failed:', e);
                },
                onOpen: function (e) {
                    console.log('SSE connection opened:', e);
                }
            });
            sse.start();
        }

        function generateContent(date) {
            callAi('/shifter-reports/generate-content?date=' + date, '#content', function(){
                generateCoordination(date);
            });
        }

        function generateCoordination(date) {
            callAi('/shifter-reports/generate-coordination?date=' + date, '#coordination', function(){
                generateMatter(date);
            });
        }

        function generateMatter(date) {
            callAi('/shifter-reports/generate-matter?date=' + date, '#matter', function () {
                $('#span-ai').text('填写完成');
            });
        }

        $("#btn-search").on('click', function () {
            search();
        });

        $("#btn-add").on('click', function () {
            popupIndex = showShifterReportForm();
        });

        $("#btn-refresh").on('click', function () {
            table.reload('shifter-report-table');
            layer.msg('表格已刷新');
        });

        table.on('tool(shifter-report-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除该记录吗？', function (index) {
                    $.ajax({
                        url: 'shifter-reports/' + data.id,
                        type: 'DELETE',
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('删除成功');
                                table.reload('shifter-report-table');
                            } else {
                                layer.msg('删除失败');
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'detail') {
                showShifterReportForm(data);
            } else if (obj.event === 'preview') {
                window.open('office-viewer?fileId=' + data.fileId);
            } else if (obj.event === 'edit') {
                window.open('office-editor?fileId=' + data.fileId);
            }
        });

        form.on('submit(form-ai)', function (data) {
            $('#btn-ai').attr('disabled', 'disabled');
            $('#span-ai').text('奋力书写中...');
            generateContent(data.field.reportDate);
            return false;
        });

        form.on('submit(form-generate)', function (data) {
            $.ajax({
                url: 'shifter-reports/generate',
                type: 'POST',
                data: data.field,
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg('提交成功');
                        table.reload('shifter-report-table');
                    } else {
                        layer.msg('提交失败');
                        console.error('提交失败');
                    }
                }
            });
            closePopupForm();
            return false;
        });

        form.on('submit(form-submit)', function (data) {
            $.ajax({
                url: 'shifter-reports/submit',
                type: 'POST',
                data: data.field,
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg('提交成功');
                        table.reload('shifter-report-table');
                    } else {
                        layer.msg('提交失败');
                        console.error('提交失败');
                    }
                }
            });
            closePopupForm();
            return false;
        });

    });
</script>
</body>
</html>